import React from 'react';
import { Button, Modal, Form, Input, Select, Icon, DatePicker, Row, Col, Upload} from 'antd';

import styles from '../style.less'

const ConfirmIntroduce = Form.create({ name: 'introduce_form' })(
    // eslint-disable-next-line react/prefer-stateless-function
    class extends React.Component {

        state = {
            content: this.props.content
        }
        

        componentDidMount() {
        }

        
        render() {
            const { visible, onCancel, onCreate, content } = this.props

            return (
                <Modal
                    visible={visible}
                    title="简讯详情确认"
                    width='60%'
                    onCancel={onCancel}
                    // onOk={onCreate}
                    footer={(<Button type="primary" onClick={onCreate} style={{display:'block',margin:'auto'}}>确定生成</Button>)}
                >
                    <div style={{display:'flex',flexDirection:'column',alignItems:'center',width:'80%',margin:'auto'}}>
                        <h1 style={{fontSize:'1.5rem'}}>{content.title}({content.time}年第{content.qishu}期)</h1>
                        <p style={{
                            textIndent: '30px',
                            padding: '0 30px',
                            letterSpacing: '1px',
                            color: 'rgb(0,0,0,0.85)',
                            fontSize: '15px',
                            lineHeight:'18px'
                        }}>{content.content}</p>
                        <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap'}}>
                            { content.picture ? content.picture.map(val => (<img style={{width:'43%', margin:'2% 3%'}} src={val.url} alt=""/>)) : ''}
                        </div>
                    </div>



                </Modal>
            )
        }
    }
)



export default ConfirmIntroduce